<template>
  <div class="home compact-home">
    <!-- 顶部三个卡片 -->
    <a-row :gutter="12" class="top-cards">
      <a-col :span="8">
        <a-card hoverable @click="onAddBill" class="mini-card">
          <div class="card-title">
            <PlusCircleOutlined style="font-size:32px;vertical-align:middle;margin-right:12px;color:#5e72e4;" />
            <span class="card-title-text">新增账目</span>
          </div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card hoverable class="mini-card">
          <div class="card-title">
            <FlagOutlined style="font-size:32px;vertical-align:middle;margin-right:12px;color:#f6b93b;" />
            <span class="card-title-text">本月预算</span>
          </div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card hoverable @click="onChat" class="mini-card">
          <div class="card-title">
            <BulbOutlined style="font-size:32px;vertical-align:middle;margin-right:12px;color:#00b894;" />
            <span class="card-title-text">存钱计划(AI)</span>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 中间收支报表卡片 -->
    <a-card class="report-card-custom" style="margin: 18px 0 12px 0;">
      <div class="report-flex">
        <!-- 左侧本月收入 -->
        <div class="income-summary">
          <div class="report-title">收支总览</div>
          <div class="report-subtitle">本月收入</div>
          <div class="income-skeleton">
            <div class="skeleton-bar" v-for="i in 3" :key="i" />
          </div>
        </div>
        <div class="divider"></div>
        <!-- 右侧本月支出 -->
        <div class="expense-summary">
          <div class="report-subtitle">本月支出</div>
          <div class="bar-chart">
            <div
              v-for="(bar, idx) in expenseBars"
              :key="idx"
              class="bar-item"
              :style="{height: bar + 'px', opacity: 0.5 + idx * 0.03}"
            ></div>
          </div>
        </div>
      </div>
    </a-card>

    <!-- 最近账单（卡片固定高度，表格可滚动） -->
    <a-card class="mini-table-card">
      <div class="card-title">最近账单</div>
      <div class="table-scroll">
        <a-table :columns="billColumns" :data-source="billData" size="small" :pagination="false" />
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { PlusCircleOutlined, FlagOutlined, BulbOutlined } from '@ant-design/icons-vue'

const router = useRouter()

const onAddBill = () => {
  router.push('/add-bill')
}

const onChat = () => {
  //打开新窗口，跳转到指定页面
  window.open('http://150.158.143.141:8080/', '_blank');
}

// 假账单数据
const billColumns = [
  { title: '日期', dataIndex: 'date', key: 'date' },
  { title: '类型', dataIndex: 'type', key: 'type' },
  { title: '金额', dataIndex: 'amount', key: 'amount' },
  { title: '备注', dataIndex: 'remark', key: 'remark' }
]
const billData = [
  { key: 1, date: '2024-07-01', type: '餐饮', amount: 50, remark: '午餐' },
  { key: 2, date: '2024-07-01', type: '交通', amount: 20, remark: '公交' },
  { key: 3, date: '2024-07-02', type: '收入', amount: 2000, remark: '工资' },
  { key: 4, date: '2024-07-03', type: '购物', amount: 100, remark: '超市' },
]

// 假支出柱状条数据
const expenseBars = [24, 32, 28, 36, 30, 40, 34, 38, 28, 44, 36, 48];
</script>

<style scoped>
.compact-home {
  padding: 0 8px;
}
.top-cards {
  margin-bottom: 8px;
}
.mini-card {
  min-height: 70px;
  padding: 8px 0;
}
.card-title {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin: 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-title-text {
  font-size: 24px;
  font-weight: 600;
  vertical-align: middle;
}
.report-card-custom {
  min-height: 120px;
  padding: 12px 18px 8px 18px !important;
}
.report-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.income-summary {
  flex: 1.2;
  padding-right: 12px;
}
.expense-summary {
  flex: 2;
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.report-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 2px;
}
.report-subtitle {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}
.income-skeleton {
  margin-top: 8px;
}
.skeleton-bar {
  height: 10px;
  width: 80px;
  background: #e5e7eb;
  border-radius: 4px;
  margin-bottom: 8px;
}
.divider {
  width: 1px;
  background: #e5e7eb;
  margin: 0 18px;
  min-height: 60px;
  align-self: center;
}
.bar-chart {
  display: flex;
  align-items: flex-end;
  height: 56px;
  margin-top: 8px;
  gap: 4px;
}
.bar-item {
  width: 12px;
  background: #bfc6d1;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s;
}
.mini-table-card {
  margin-top: 8px;
  padding: 8px 0 0 0 !important;
  height: 220px;
  display: flex;
  flex-direction: column;
}
.table-scroll {
  flex: 1;
  overflow-y: auto;
}
:deep(.ant-table) {
  min-height: 0;
  font-size: 13px;
}
:deep(.ant-table-thead > tr > th) {
  padding: 6px 8px;
}
:deep(.ant-table-tbody > tr > td) {
  padding: 6px 8px;
}
@media (max-width: 600px) {
  .top-cards {
    flex-direction: column !important;
    display: flex !important;
  }
  .top-cards .ant-col {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px;
  }
  .card-title, .card-title-text {
    font-size: 18px !important;
  }
  .mini-card {
    min-height: 56px;
    padding: 6px 0;
  }
  .report-card-custom, .mini-table-card {
    padding: 6px !important;
  }
  .report-title, .report-subtitle {
    font-size: 14px !important;
  }
  .income-skeleton .skeleton-bar {
    width: 60px !important;
    height: 8px !important;
  }
  .bar-item {
    width: 8px !important;
  }
  .mini-table-card {
    height: 160px !important;
  }
  .table-scroll {
    font-size: 12px;
    overflow-x: auto;
  }
  :deep(.ant-table) {
    font-size: 12px;
    overflow-x: auto;
    min-width: 480px;
  }
  :deep(.ant-table-thead > tr > th),
  :deep(.ant-table-tbody > tr > td) {
    padding: 4px 6px !important;
  }
}
</style>
